Skip to content

Conversation

hi-ogawa
Copy link
Contributor

@hi-ogawa hi-ogawa commented Aug 25, 2025

Description

TODO

  • fix client
  • fix server
  • test

Comment on lines +484 to +486
return ctx.modules.filter(
(m) => !(m.id?.includes('?direct') && !m.isSelfAccepting),
)
Copy link
Contributor Author

@hi-ogawa hi-ogawa Aug 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed by targeting non self-accepting case specifically. This likely means HMR doesn't work for xxx.module.css?url, but let's just postpone dealing with that edge case.

@hi-ogawa hi-ogawa added the trigger: preview Trigger pkg.pr.new label Aug 25, 2025
Copy link

pkg-pr-new bot commented Aug 25, 2025

Open in StackBlitz

npm i https://pkg.pr.new/@vitejs/plugin-react@776
npm i https://pkg.pr.new/@vitejs/plugin-react-oxc@776
npm i https://pkg.pr.new/@vitejs/plugin-rsc@776
npm i https://pkg.pr.new/@vitejs/plugin-react-swc@776

commit: 1dafe43

hi-ogawa and others added 4 commits August 25, 2025 12:44
Add test cases for client-url.css and server-url.css to cover CSS HMR
functionality with URL-based CSS imports, following the same pattern
as existing CSS module tests.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
@hi-ogawa hi-ogawa marked this pull request as ready for review August 25, 2025 05:08
@hi-ogawa hi-ogawa requested a review from Copilot August 25, 2025 05:08
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes CSS Hot Module Replacement (HMR) issues with ?url query parameters in React Server Components by modifying the module filtering logic in the client environment. The fix prevents unnecessary browser reloads when changing CSS files that use the ?url query.

  • Updates the HMR module filtering to allow self-accepting modules with ?direct query
  • Adds comprehensive test coverage for CSS ?url imports in both client and server components
  • Removes manual timestamp-based cache busting since proper HMR now handles it

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/plugin-rsc/src/plugin.ts Updates HMR filter logic to check isSelfAccepting for modules with ?direct
packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx Adds CSS ?url import and test elements for server-side testing
packages/plugin-rsc/examples/basic/src/routes/style-server/server-url.css New CSS file for server-side ?url testing
packages/plugin-rsc/examples/basic/src/routes/style-client/client.tsx Adds CSS ?url import and test elements for client-side testing
packages/plugin-rsc/examples/basic/src/routes/style-client/client-url.css New CSS file for client-side ?url testing
packages/plugin-rsc/examples/basic/src/routes/css-queries/client.tsx Removes manual cache busting since HMR now handles it properly
packages/plugin-rsc/e2e/basic.test.ts Adds comprehensive test cases for CSS ?url HMR functionality

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@hi-ogawa hi-ogawa merged commit 4c4879b into main Aug 25, 2025
22 checks passed
@hi-ogawa hi-ogawa deleted the 08-25-fix_rsc_fix_css_hmr_with_url_ branch August 25, 2025 05:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

trigger: preview Trigger pkg.pr.new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

HMR for CSS imported with ?url is not working

1 participant